<template>
	<div class="scroll">
		<div class="srl" v-for="item in list" :key='item.id' :style="'background-image:url(\''+item.imgURl+'\')'">
			<router-link to="/">
				<p>{{item.title}}</p>
				<span>{{item.name}}</span>
			</router-link>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Scroll',
		data(){
			return{
				list:[
					{id:1,title:'主题游',name:'个性独创',imgURl:require('../../../assets/iconfing/1.1.png')},
					{id:2,title:'亲子游',imgURl:require('../../../assets/iconfing/1.2.png')},
					{id:3,title:'摄影游',imgURl:require('../../../assets/iconfing/1.3.png')},
					{id:4,title:'户外游',imgURl:require('../../../assets/iconfing/1.4.png')},
					{id:5,title:'活动赛事',imgURl:require('../../../assets/iconfing/1.5.png')},
					{id:6,title:'瑜伽行',imgURl:require('../../../assets/iconfing/1.6.png')},
					{id:7,title:'野奢邦',imgURl:require('../../../assets/iconfing/1.7.png')},
					{id:8,title:'定制游',imgURl:require('../../../assets/iconfing/1.8.png')},
					{id:9,title:'签证',imgURl:require('../../../assets/iconfing/1.9.png')},
					{id:10,title:'邮轮',imgURl:require('../../../assets/iconfing/2.1.png')},
					{id:11,title:'美宿度假',imgURl:require('../../../assets/iconfing/2.2.png')},
				]
			}
		}
	}
</script>

<style>
	a{
		text-decoration: none;
		color: #000000;
	}
	.scroll{
		width: 90%;
		overflow: hidden;
		margin: 0 auto;
	}
	.scroll div:nth-child(1){
		height: 2.63rem;
	}
	.scroll div:nth-child(1) p{
		line-height: 1.5rem;
	}
	.scroll div{
		width: 24%;
		height: 1.3rem;
		border: 1px solid white;
		float: left;
		background: no-repeat center center/cover;
		text-align: center;
	}
	.scroll div p{
		line-height: 1rem;
		font-size: 0.4rem;
		font-weight: bold;
	}
	.scroll div:nth-child(1) span{
		font-size: 0.3rem;
		background-color: #ffd800;
		border-radius: 0.5rem;
		padding: 0.1rem 0.2rem;
	}
</style>
